import React, { useState, useEffect, createRef } from 'react'
import styles from '../../style/childPublic/childPublic.module.less'
import conBack from '../../style/contentBack/contentBack.module.less'
import PackagingWasteStyle from '../../style/packagingWaste/packagingWaste.module.less'
import HeaderTop from "../../components/HeaderTop/HeaderTop";
import { Input, Button, Pagination, message, Empty } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { recycleList } from '../../apis/policyInformation'
export default function PackagingWaste() {
    const [messageApi, contextHolder] = message.useMessage();
    const key = 'updatable';
    const [title] = useState('农药监管平台')
    const [purchaseListTitle] = useState([
        { id: 1, name: '废弃包装物' },
        { id: 2, name: '数量(公斤)' },
        { id: 3, name: '回收时间' },
        { id: 4, name: '回收人' },
        { id: 5, name: '交回人信息' },
    ])
    const keyWordsRef = createRef();
    const [total, setTotal] = useState(0)
    const [purchaseList, setPurchaseList] = useState([])
    const [keyWords, setKeyWords] = useState('')
    const [areaData, setAreaData] = useState({ pageNum: 1, pageSize: '10', area_id: localStorage.getItem('areaId'), keywords: '', area_level: localStorage.getItem('areaLevel') })
    const [count, setCount] = useState(0)
    // 分页
    const itemRender = (_, type, originalElement) => {
        if (type === 'prev') {
            return <a>上一页</a>;
        }
        if (type === 'next') {
            return <a>下一页</a>;
        }
        return originalElement;
    };
    // 切换页码
    const onChangePage = (page, pageSize) => {
        setAreaData({
            ...areaData,
            pageNum: page
        })
    }
    useEffect(() => {
        recycle()
    }, [areaData]);
    // 搜索
    const search = () => {
        setAreaData({ ...areaData, pageNum: 1, keywords: keyWords })
    }
    // 包装废弃物管理
    const recycle = async () => {
        messageApi.open({
            key,
            type: 'loading',
            content: '数据加载中...',
        });
        const { data } = await recycleList(areaData)
        if (data.state === 1) {
            setPurchaseList(data.list)
            setCount(data.count)
            messageApi.open({
                key,
                type: 'success',
                content: '数据加载完成!',
                duration: 2,
            });
        } else {
            messageApi.open({
                key,
                type: 'error',
                content: data.msg,
                duration: 2,
            });
        }
    }
    return (
        <div div className={styles.pubBack}>
            <HeaderTop title={title}></HeaderTop>
            <div className={conBack.contentBack}>
                <span className={conBack.topTitle}>包装废弃物管理列表</span>
                <div className={PackagingWasteStyle.back}>
                    {/* 搜索框 */}
                    <div className={PackagingWasteStyle.rightList}>
                        <div className={PackagingWasteStyle.searchBtn}>
                            <Input placeholder="请输入联系人名称/乡镇查询" ref={keyWordsRef} value={keyWords} onChange={() => {
                                setKeyWords(keyWordsRef.current.input.value)
                            }} />
                            <Button type="primary" onClick={() => search()} icon={<SearchOutlined />}>
                                查询
                            </Button>
                        </div>
                    </div>
                    {/* 列表 */}
                    <div className={PackagingWasteStyle.listBox}>
                        <table>
                            <thead>
                                {
                                    purchaseListTitle.map(item => {
                                        return (
                                            <th key={item.id}>{item.name}</th>
                                        )
                                    })
                                }
                            </thead>
                            <tbody className={purchaseList.length !== 0 ? "" : `${PackagingWasteStyle.noShowData}`}>
                                {
                                    purchaseList.map(item => {
                                        return (
                                            <tr key={item.id}>
                                                <td>{item.typeName}</td>
                                                <td>{item.recycle_number2}</td>
                                                <td>{item.recycle_time_str}</td>
                                                <td>{item.backName === undefined ? '暂无该信息' : item.backName}</td>
                                                <td>{item.recycle_unit}</td>

                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                            <tr className={purchaseList.length === 0 ? `${PackagingWasteStyle.emptyData}` : `${PackagingWasteStyle.noShowData}`}>
                                <td colSpan={7} style={{ textAlign: 'center' }}>
                                    <Empty
                                        image="http://120.79.70.96:10301/mapimg/kong_he.png"
                                        imageStyle={{
                                            height: 150,
                                        }} />
                                </td>
                            </tr>
                        </table>
                    </div>
                    {/* 页尾 */}
                </div>
                <div className={conBack.pagActive}>
                    <Pagination total={count} current={areaData.pageNum} defaultCurrent={1} showTotal={(count) => `共 ${count} 条记录`} itemRender={itemRender} pageSize={10} onChange={onChangePage} showSizeChanger={false} />
                </div>
            </div>
        </div>
    )
}
